<template>
  <div id="home">
    <el-container>
      <el-header>
        <el-row>
          <div class="start-item">
            <img src="../../assets/logo.png" alt="" class="logo" />
            <span>魔方医院后台管理</span>
          </div>
          <div class="end-item">
            <el-button icon="el-icon-message-solid" class="infrom"></el-button>
            <el-button icon="el-icon-s-comment" class="infrom"></el-button>
            <el-image
              :src="require(`../../assets/logo.png`)"
              fit="cover"
              style="width: 28px; height: 28px; border-radius: 50%"
            ></el-image>
            <el-dropdown @command="command">
              <span class="name el-dropdown-link"
                >王多鱼 <i class="el-icon-caret-bottom"></i
              ></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="0">个人设置</el-dropdown-item>

                <el-dropdown-item divided :command="1">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-row>
      </el-header>

      <el-container>
        <el-aside width="240px">
          <el-row class="navbar">
            <el-col>
              <treeMenu
                :menuArr="menuArr"
                @chageVal="chageVal"
                @nowMenu="nowMenu"
              ></treeMenu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <el-row class="tabs-list">
            <el-tabs
              v-model="editableTabsValue"
              type="card"
              closable
              @tab-remove="removeTab"
              @tab-click="selectTab"
            >
              <el-tab-pane label="首页" name="/home/first" :closable="false">
              </el-tab-pane>
              <el-tab-pane
                v-for="item in tabList"
                :key="item.path"
                :label="item.menuName"
                :name="item.path"
              >
              </el-tab-pane>
            </el-tabs>
            <div class="right-btn">
              <el-button type="primary" @click="delAll">
                <span>关闭其他标签</span>
              </el-button>
              <el-button type="primary" @click="flush">
                <i></i>
                <span>刷新页面</span>
              </el-button>
            </div>
          </el-row>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="item in breadArr"
              :key="item.path"
              >{{ item.meta.title }}</el-breadcrumb-item
            >
          </el-breadcrumb>
          <el-row>
            <router-view></router-view>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import storage from "../../utils/storage";
import { mapActions, mapState, mapMutations } from "vuex";
import treeMenu from "../../components/components_wxq/treeMenu.vue";
import { exit } from "../../utils/api/login";
export default {
  name: "homePage",
  components: {
    treeMenu,
  },
  inject: ["reload"],
  data() {
    return {
      editableTabsValue: "/home/first",
      subActive: {},
      isActive: false,
      nowNav: "",
      homeData: {
        username: null,
        search: null,
      },
    };
  },
  methods: {
    ...mapActions("home", ["sethomeLimits"]),
    ...mapMutations("home", ["closeTabs", "delTabs"]),
    removeTab(targetName) {
      let tabs = this.tabList;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.path === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              this.editableTabsValue = nextTab.path;
            } else {
              this.editableTabsValue = "/home/first";
            }
          }
        });
      }

      this.closeTabs(targetName);

      this.$router.push(this.editableTabsValue);
    },
    selectTab() {
      this.$router.push(this.editableTabsValue);
    },
    delAll() {
      this.delTabs(this.editableTabsValue);
    },
    flush() {
      this.reload();
      this.breakPage();
    },
    nowMenu(val) {
      this.nowNav = val;
      storage.setStorage("nowNav", this.nowNav);
    },
    chageVal(str) {
      this.editableTabsValue = str;
    },
    // 退出登录
    command(command) {
      console.log(command);
      if (command == 1) {
        let token = storage.getStorage("token");
        exit(token).then((data) => {
          console.log(data);
          if (data.data.code == 200) {
            this.$router.push("/login");
            storage.removeStorage("tabList");
            storage.removeStorage("editableTabsValue");
            storage.removeStorage("nowNav");
            storage.removeStorage("username");
            storage.removeStorage("token");
          }
        });
      } else if (command == 0) {
        this.$router.push("/spacecp");
      }
    },
    breakPage(e) {
      storage.setStorage("editableTabsValue", this.editableTabsValue);
      storage.setStorage("tabList", this.tabList);
    },
  },
  computed: {
    ...mapState("home", ["menuArr", "tabList"]),
    breadArr() {
      return this.$route.matched;
    },
  },
  watch: {},
  mounted() {
    this.editableTabsValue =
      sessionStorage.getItem("editableTabsValue") || "/home/first";
  },
  created() {
    console.log(storage.getStorage("username"));

    window.addEventListener("beforeunload", (e) => this.breakPage(e));

    if (!storage.getStorage("username")) {
      alert("请登录后查看");
      this.$router.push("/login");
    }
  },
  destroyed() {
    window.removeEventListener("beforeunload", (e) => this.breakPage(e));
    storage.removeStorage("tabList");
    storage.removeStorage("editableTabsValue");
    storage.removeStorage("nowNav");
  },
};
</script>
<style lang="less" scoped>
#home {
  width: 100%;
  height: 100%;
  overflow: auto;

  .el-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    .el-header {
      width: 100%;
      height: 72px !important;
      background-color: #41b6e6;
      padding: 0;
      .el-row {
        width: 100%;
        height: 100%;
        padding: 0 32px;
        .infrom {
          background-color: transparent;
          border: none;
          color: #fff;
          padding: 0;
          font-size: 20px;
          margin-right: 16px;
        }
      }
    }
  }
}

.start-item {
  height: 72px;
  float: left;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  .logo {
    width: 42px;
    margin-right: 16px;
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
}
.end-item {
  float: right;
  height: 72px;
  display: flex;

  align-items: center;
  color: #fff;
  .el-image {
    border-radius: 50%;
    margin-right: 12px;
    margin-left: 24px;
  }
  .name {
    margin-right: 6px;
  }
}
.el-aside {
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
  .navbar {
    background-color: #fff;
    height: 100%;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
}

// .el-menu-item {
//   margin: 10px 0;
// }

.el-main {
  padding: 0px;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f2f4f6;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
  .tabs-list {
    width: 100%;
    background-color: #fff;
    height: 48px;
    padding: 0 240px 0 0px;
    box-sizing: border-box;
    position: fixed;
    z-index: 9;
    box-shadow: 0 1px 0px 1px rgba(99, 99, 99, 0.1);

    .el-tabs /deep/ .el-tabs__header {
      border: none !important;
      height: 48px;
      margin: 0;
      display: flex;
      align-items: center;
      float: left;
    }
    .el-tabs /deep/ .el-tabs__header .el-tabs__nav {
      border: none;
    }
    .el-tabs /deep/ .el-tabs__header .el-tabs__item {
      border: 1px solid #eee;
      height: 32px;
      border-radius: 4px;
      padding: 0 8px;
      line-height: 32px;
      margin-left: 12px;
    }
    .el-tabs /deep/ .el-tabs__header .is-active {
      background-color: rgb(236, 245, 255);
      border: 1px solid rgb(203, 226, 255);

      outline: none;
    }
    .right-btn {
      width: 190px;
      position: absolute;
      top: 0;
      background-color: #fff;
      z-index: 10;
      right: 240px;
      .el-button {
        background-color: #fff;
        height: 48px;
        padding: 0 12px;
        color: #41b6e6;
        border: none;
        border-radius: 0;
        margin-left: 0px;
        border-left: 1px solid #e4e7ed;
      }
    }
  }

  .el-breadcrumb {
    padding: 20px;
    margin-top: 48px;
  }
  // .el-tabs /deep/ .el-tabs__item:last-child {
  //   border-radius: 0px 8px 0 0 !important;
  // }
}
</style>
